<template>
  <div class="progress-circle-container">
    <svg xmlns="http://www.w3.org/2000/svg"
         class="svg"
         version="1.1"
         viewBox='0 0 100 100'
         :style='"transform: rotate(-90deg);transform-origin:50% 50%;width: "+width+"px;height: "+width+"px;"'>
      <circle cx="50"
              cy="50"
              r="50"
              class="progress-background"
              fill="transparent" />
      <circle cx="50"
              cy="50"
              r="50"
              class="progress-bar"
              :stroke-dasharray='dasharray'
              :stroke-dashoffset='dashoffset'
              fill="transparent" />
    </svg>
    <slot></slot>
  </div>
</template>

<script>
// 圆形进度 播放键
export default {
  props: {
    width: Number,
    percent: Number
  },
  data () {
    return {
      // 周长
      dasharray: Math.PI * 100
    }
  },
  computed: {
    dashoffset () {
      // console.log(this.percent)
      return this.dasharray * (1 - this.percent)
    }
  }
}
</script>
<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable'
.progress-circle-container
  position absolute
  top 0
  left 0
  .svg
    position absolute
    top 0
    left 0
    z-index 3
  circle
    position absolute
    top 0
    left 0
    stroke-width 10px
    box-sizing border-box
    transform scale(0.9)
    transform-origin center
  .progress-background
    stroke $color-theme-d
    z-index 1
  .progress-bar
    stroke $color-theme
    z-index 2
</style>